import dayjs from 'dayjs'
import behavior from '../../../utils/behaviors'
Page({
  behaviors: [behavior],
  data: {
    appointment: '', // 选中的日期 用于van-cell组件
    currentDate: 0, // 选中的日期 用于van-datetime-picker组件
    defaultDate: new Date().getTime(), // 默认日期
    houseLayerVisible: false,
    repairLayerVisible: false,
    dateLayerVisible: false,
    houseList: [], // 选择房屋列表
    houseId: '', //房屋信息id
    houseInfo: '', // 选中房屋名字
    repairItem: [], // 维修项目列表
    repairName: '', // 维修项目名字
    repairItemId: '', //维修项目id
    mobile: '',
    description: '', // 问题描述
    attachment: '', // 问题附件图片
  },
  rules: {
    houseId: [{ required: true, message: '请选择报修的房屋' }],
    repairItemId: [{ required: true, message: '请选择报修的项目' }],
    mobile: [
      { required: true, message: '请填写手机号' },
      { pattern: /^1[3-9]\d{9}$/, message: '请填写正确的手机号' },
    ],
    appointment: [{ required: true, message: '请选择预约日期' }],
    description: [{ required: true, message: '请填写问题描述' }],
    attachment: [{ required: true, message: '请上传附件图片' }],
  },
  onLoad() {
    wx.setNavigationBarTitle({
      title: this.options.id ? '编辑保修信息' : '填写报修信息',
    })
    if (this.options.id) this.getDetail()
    this.getHouseList()
    this.getrepairItem()
  },
  // 编辑-获取详情数据
  async getDetail() {
    const res = await wx.http({
      url: `/repair/${this.options.id}`
    })
    this.setData(res)
  },
  // 获取房屋列表
  async getHouseList() {
    const houseList = await wx.http({
      url: '/room',
    })
    this.setData({
      houseList
    })
  },
  // 选中房屋名字
  selectHouse(ev) {
    this.setData({
      houseInfo: ev.detail.point + ev.detail.building + ev.detail.room,
      houseId: ev.detail.id
    })
  },
  // 获取维修项目列表
  async getrepairItem() {
    const repairItem = await wx.http({
      url: '/repairItem',
    })
    this.setData({
      repairItem
    })
  },
  // 维修项目名称
  selectRepairName(ev) {
    this.setData({
      repairName: ev.detail.name,
      repairItemId: ev.detail.id
    })
  },
  // 确认预约日期
  confirmDate(ev) {
    this.setData({
      appointment: dayjs(ev.detail).format('YYYY-MM-DD'), //给van-cell显示用
      currentDate: ev.detail, // 给vant-detetime-picker组件用，发现传格式化后的字符串报错，所以传时间戳
      dateLayerVisible: false,
    })
  },
  // 图片上传
  afterRead(event) {
    const {
      file
    } = event.detail
    wx.uploadFile({
      url: wx.http.baseURL + '/upload', // 开发者服务器地址
      name: 'file', // 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
      filePath: file.url, // 要上传文件资源的路径 (本地路径)
      header: {
        Authorization: 'Bearer ' + getApp().token,
      },
      success: (res) => {
        this.setData({
          attachment: (this.data.attachment || []).concat(JSON.parse(res.data).data),
        })
      },
    })
  },
  // 删除图片
  delPic(ev) {
    this.setData({
      attachment: this.data.attachment.filter((item, index) => index !== ev.detail.index),
    })
  },
  openHouseLayer() {
    this.setData({
      houseLayerVisible: true
    })
  },
  closeHouseLayer() {
    this.setData({
      houseLayerVisible: false
    })
  },
  openRepairLayer() {
    this.setData({
      repairLayerVisible: true
    })
  },
  closeRepairLayer() {
    this.setData({
      repairLayerVisible: false,
    })
  },

  openDateLayer() {
    this.setData({
      dateLayerVisible: true
    })
  },
  closeDateLayer() {
    this.setData({
      dateLayerVisible: false
    })
  },
  // 提交报修逻辑
  async goList() {
    // 1. 校验
    const validateRet = this.validate()
    if (!validateRet) return
    // 2. 调接口
    const { id, houseId, repairItemId, mobile, appointment, description, attachment } = this.data
    await wx.http({
      url: '/repair',
      method: 'POST',
      data: { id, houseId, repairItemId, mobile, appointment, description, attachment }
    })
    // 3. 提示
    wx.showToast({
      title: '提交报修成功',
    })
    // 4. 跳转页面 去 报修列表页面
    wx.reLaunch({
      url: '/repair_pkg/pages/list/index',
    })
  },
})